<template>
	<view>

		<view class="mallTop_box">
			<view class="mallSearch_con">
				<u-search placeholder="请输入搜索关键字" v-model="keyword" :show-action="false" :clearabled="true"
					@search="searchClick"></u-search>
			</view>
			<view class="mallSwiper_con" v-if="swiperList.length>0">
				<u-swiper :list="swiperList" name="img_url"  mode="dot" height="280"></u-swiper>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goodsList_box">
			<view class="goodsHead">热兑商品</view>
			<view class="goodsList_con">
				<view class="goodsItem" v-for="(item,index) in goodsList" :key="index"
					@click="goPage('/pagesOther/mall/goodsDetail?goods_id='+item.id)">
					<view class="goodsPic">
						<image :src="item.img_url" mode=""></image>
					</view>
					<view class="goodsCon">
						<view class="goodsName">{{item.name}}</view>
						<view class="goodsPrice"><u-icon name="integral-fill" color="#ffaa00" size="28"></u-icon> <text>{{item.sale_price}}</text></view>
					</view>
				</view>
			</view>

			<!-- 分页 -->
			<view class="dataEmpty_con">
				<!-- 数据为空 -->
				<u-empty v-if="goodsList.length==0"></u-empty>
				<!-- 加载更多 -->
				<view class="loadmore_box" v-if="goodsList.length>0">
					<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',

				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 轮播图
				swiperList: [],

				// 商品列表
				goodsList: [],
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
		},
		onShow() {
			var _this = this;
			_this.getSwiperList();
			_this.pages = 1;
			_this.getGoodsList();
		},
		onReady() {

		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		methods: {
			// 获取轮播图
			async getSwiperList() {
				var _this = this;
				_this.$u.get('/api/article.system/getList', {
					type:2,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取轮播图==");
					console.log(res);
					_this.swiperList = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 搜索
			searchClick(e) {
				// console.log(e)
				var _this = this;
				_this.keyword = e;

				_this.pages = 1;
				_this.getGoodsList();
			},

			// 获取商品列表
			async getGoodsList() {
				var _this = this;
				_this.$u.get('/api/shop.goods/getList', {
					pages: _this.pages,
					limit: _this.limit,
					keyword: _this.keyword,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取商品列表==");
					console.log(res);
					var resData = res.data;
					var goodsList = _this.goodsList;
					if (_this.pages == 1) {
						goodsList = [];
					}
					_this.goodsList = goodsList.concat(resData);

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;
				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					_this.getGoodsList();
				}, 2000)
			},

		}
	}
</script>

<style scoped lang="scss">
	.mallTop_box {
		padding: 20rpx;
		background-color: $uni-color-white;
		overflow: hidden;
	}

	.mallSearch_con {
		overflow: hidden;
	}

	.mallSwiper_con {
		padding-top: 20rpx;
		overflow: hidden;
	}

	// 推荐商品
	.goodsList_box {
		padding: 0 20rpx;
		overflow: hidden;
	}

	.goodsHead {
		padding: 30rpx 0;
		font-size: 32rpx;
		text-align: center;
		overflow: hidden;
	}

	.goodsList_con {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.goodsItem {
		width: 348rpx;
		border-radius: 10rpx;
		background-color: $uni-color-white;
		overflow: hidden;
		margin-bottom: 14rpx;
	}

	.goodsPic {
		width: 348rpx;
		height: 348rpx;
	}
	.goodsPic image{
		width: 100%;
		height: 100%;
	}

	.goodsCon {
		padding: 20rpx;
		overflow: hidden;
	}

	.goodsName {
		height: 76rpx;
		line-height: 38rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goodsPrice {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color-error;
		margin-top: 10rpx;
	}
	.goodsPrice text{
		padding-left: 10rpx;
	}
</style>
